<template>
  <div id="app">
    <header class="header">
      <!-- router-link是导航标签，是用来点击的时候让 router-view能够根据 to属性进行动态导航 -->
      <router-link to="/home">首页</router-link>
      <router-link to="/news">新闻</router-link>
      <router-link to="/user/userlist">用户组件</router-link>
      <router-link to="/user1">用户组件1</router-link>
      <router-link to="/ceShiXiaLa">测试下拉</router-link>
      <router-link to="/ceShiElementUI">测试Element-UI</router-link>
      <router-link to="/ceShiVuex">测试vuex</router-link>
    </header>
    <hr/>
    <!-- 5 引入路由显示标签   -->
    <router-view></router-view>
  </div>
</template>
<script>

  export default {
    data() {
      return {};
    },
    methods: { //所有方法放到methods
    }, mounted() {  // 生命周期函数 vue页面刷新就会触发
    }
  }
</script>
<style lang="scss">
  .finish {
    li {
      background: aqua;
    }
  }
  .header{
    height:4.4rem; // 内容高度
    background: #000;
    color:#fff;
    line-height: 4.4rem;// 行间距
    text-align:center;
    a{
      color: #fff;
      padding:0 2rem;
    }
  }
</style>
